<template>
  <div class="form-subform-preview">
    <div class="form-preview-group">
      <label>
        {{ _displayName }}
        <span class="form-preview-notNull" v-if="field.isNull == 0">*</span>
      </label>
      <div class="form-preview-mock">
        <span class="form-type-text">{{$t('common.form.type.subForm')}}</span>
      </div>
    </div>
  
    <div class="form-subform-preview-content">
      <!-- start 关联显示字段 -->
      <div class="form-subform-preview-title">{{$t('common.base.concatField')}}</div>
      <div class="form-preview">
        <div
          class="form-design-preview"
          v-for="item in serviceItemRelatedFields"
          :key="item.fieldName"
        >
          <div class="form-preview-group">{{ returnDisplayName(item) }}</div>
        </div>
      </div>
      <!-- end 关联显示字段 -->
    </div>
  </div>
</template>
  
<script>
/* props */
import { previewProps } from '@src/component/form/components/props';
/* mixin */
import FormSubFormMixin from '@src/component/form/mixin/form.subForm';
import translate from '@src/component/form/mixin/translate.js'
  
import { transformI18n } from '@src/locales';
export default {
  name: 'form-sub-service-iterm-preview',
  mixins: [FormSubFormMixin, translate],
  props: previewProps,
  computed: {
    /** 服务项目关联系统字段 */
    serviceItemRelatedFields: {
      get() {
        return this.subformFields.filter(field => field.formType === 'serviceItemRelatedFields');
      },
      set(value) {
        let subFormFieldList = [
          ...value,
        ]
        this.$set(this.field, 'subFormFieldList', subFormFieldList)
      }
    },
    // 自定义显示字段
    notServiceItermRelatedCustomFields: {
      get() {
				return this.customFields.filter(field => field.isSystem == 0 && field.formType !== 'serviceItemRelatedFields')
      },
      set(value) {
        let subFormFieldList = [
          ...this.serviceItemRelatedFields,
          ...value,
        ]
        this.$set(this.field, 'subFormFieldList', subFormFieldList)
      }
    },
    subFormPreviewAttribute(){
      return transformI18n('common.form.displayField', this.formPreviewLocale)
    }
  },
  inject: {
    isDisabledPreview: {
      default: false
    }
  },
  components: {
    // 组件循环引用报错，改用import
    FormDesignPreview: () => import('@src/component/form/FormDesignPreview')
  },
};
</script>
  
  <style lang="scss" scoped>
  @import '@src/component/form/components/FormSubForm/FormSubForm.scss';
  ::v-deep .form-design-preview-disabled {
    border-color: #F0F0F0 !important;
  }
  ::v-deep .form-design-tip{
    background:none;
    min-height:30px;
    p{
      bottom:0;
    }
  }
  </style>
  